<template>
	<view class="main">
		<view class="item" :class="{active:isZH}" @click="changeLang('zh-Hans')">
			<image v-if="isZH" src="../../static/image/correct.png" mode=""></image>
			中文
		</view>
		<view class="item" :class="{active:!isZH}" @click="changeLang('en')">
			<image v-if="!isZH" src="../../static/image/correct.png" mode=""></image>
			English
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isZH: true,
				systemInfo: "",
				applicationLocale: "",
				isAndroid: false
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isZH = this.applicationLocale == "zh-Hans" ? true : false
			this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
		},
		methods: {
			onLocaleChange(code) {

				if (code == this.applicationLocale) {
					return false
				}
				if (this.isAndroid) {
					if (code == this.applicationLocale) {
						return false
					}
					uni.showModal({
						content: this.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(code);
								this.applicationLocale = uni.getLocale();
								this.isZH = !this.isZH
							}
						}
					})
				} else {
					uni.setLocale(code);
					this.$i18n.locale = code;
					this.applicationLocale = uni.getLocale();
					this.isZH = !this.isZH
				}
			},
			changeLang(code) {
				this.$httpRequest({
					url: "partners/api/survey.php",
					method: "POST",
					data: {
						method: "changeLang",
						param: code == 'en' ? "en" : "zh_cn"
					}
				}).then(res=>{
					if(res.err ==200){
						this.onLocaleChange(code)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: 0 auto;

		.item {
			width: calc(100% - 80rpx);
			line-height: 96rpx;
			background: #EBEDF0;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #0F1826;
			text-align: left;
			margin-top: 20rpx;
			padding-left: 80rpx;
			position: relative;

			image {
				position: absolute;
				left: 20rpx;
				top: 28rpx;
				width: 40rpx;
				height: 40rpx;
			}

			&.active {
				background-color: rgba(77, 190, 193, 0.2);
				color: rgba(77, 190, 193, 1);
			}
		}
	}
</style>
